/**
 * @description 好友申请列表 好友聊天列表
 */
import { Badge, Button } from "antd"
import avatar from '@/assets/img/avator.webp'
const list = [
  {
    id: "1",
    notreadnum: 1,
    name: "用户名1",
    content: "消息内容1"
  },
  {
    id: "2",
    notreadnum: 0,
    name: "用户名2",
    content: "消息内容2"
  },
  {
    id: "3",
    notreadnum: 3,
    name: "用户名3",
    content: "消息内容3"
  },
  {
    id: "4",
    notreadnum: 0,
    name: "用户名4",
    content: "消息内容4"
  },
  {
    id: "5",
    notreadnum: 0,
    name: "用户名5",
    content: "申请添加你为好友",
    showBtn: true,
  },
  {
    id: "6",
    notreadnum: 0,
    name: "用户名6",
    content: "申请添加你为好友",
    showBtn: true,
  },

]

function FriendTab() {
  return (
    <div className="friendlist">
      {
        list.map(item => (
          <div key={item.id} className="item" >

            {/* 图像和未读数量 */}
            <Badge count={item.notreadnum}>
              <img className="avatar" src={avatar} />
            </Badge>

            {/* 用户名和消息 */}
            <div className="name-box">
              <div className="name">{item.name}</div>
              <div className="content">{item.content}</div>
            </div>

            <div className="friendbtn">
              {
                item.showBtn &&
                <>
                  <Button className="agree" >同意</Button>
                  <Button className="refuse" >拒绝</Button>
                </>
              }

            </div>

          </div>
        ))
      }
    </div>
  )
}
export default FriendTab